<template>
    <var-dialog
        title="功能和服务详情"
        v-model:show="dialogStore.isDetailDialogVisible"
        dialog-class="m-pay-service-dialog"
        :confirm-button="false"
        :cancel-button="false"
        width="90vw"
        @closed="onClosed"
    >
        <div
            class="cell"
            v-for="item in BuyServicesConfig[orderStore.buy_type]"
            :key="item"
        >
            <img
                class="select-icon"
                :src="`${_oss_}images/dialog/select.svg`"
            />
            {{ item }}
        </div>
        <div class="dialog-footer">
            <div class="agree-text">
                <label>
                    <el-checkbox v-model="isChecked" size="small" />
                    &nbsp;支付即同意</label
                ><el-link
                    type="primary"
                    @click="dialogStore.isBuyTemplateProtocolDialog = true"
                >
                    《会员协议》
                </el-link>
            </div>

            <div class="dialog-footer__end">
                <span class="price">¥{{ orderStore.order_price }}</span>
                <el-button type="primary" size="small" @click="onSubmitPay()">
                    立即购买
                </el-button>
            </div>
        </div>
    </var-dialog>
</template>
<script setup>
import { BuyServicesConfig } from "@/config";
import { useContent } from ".";

const { dialogStore, orderStore, isChecked, onSubmitPay, onClosed } =
    useContent();
</script>
<style lang="scss" scoped>
.m-pay-service-dialog {
    background-color: rgba($color: #fff, $alpha: 1) !important;

    .cell {
        display: flex;
        align-items: center;
        margin-bottom: 6px;
        line-height: 20px;
        font-size: 14px;
        color: #333;

        .select-icon {
            width: 14px;
            margin-right: 6px;
        }
    }

    .dialog-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .agree-text {
            display: flex;
            align-items: center;
            font-size: 12px;
            user-select: none;

            label {
                display: flex;
                align-items: center;
            }
        }
    }

    .qr-code {
        width: 80%;
        margin-left: 10%;
    }

    .dialog-title {
        text-align: center;
        font-size: 20px;
        color: #fff;
        margin-bottom: 40px;
    }

    .dialog-footer {
        margin-top: 20px;
        text-align: center;

        &__end {
            display: flex;
            align-items: center;
        }

        .text {
            color: #888;
            cursor: pointer;
            user-select: none;
        }

        .price {
            color: #f00;
            margin-right: 10px;
        }
    }
}
</style>
